<template>
  <view class="container">
    <header  @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view >申请退款</view>
    </header>

    <section>
      <view class="sect-goodsList">
        <view class="goods-item" v-for="(item, index) in orderDetail.orderDetailList" :key="index">
          <image :src="item.thumbnailUrl" mode='widthFix' alt="" />
          <view class='goods-item-content'>
            <view class='goods-item-name'>{{ item.productName }}</view>

            <view class="goods-item-tag" v-if="item.limitation == 1">
              {{ item.limitationSell == 0 ? `限购${item.limitationCount}件` :
                `限购${item.limitationCount}件，第${item.limitationCount + 1}件恢复原价` }}
            </view>

            <view class='goods-item-price' v-if="!item.limitation">
              <view>原价￥<text>{{ item.showPrice }}</text>元</view>
              <view>共{{ item.count }}件</view>
            </view>

            <view class='goods-item-price' v-else-if="item.limitationBuyCount == 0">
              <view>限购价￥{{ item.limitationPrice }}元</view>
              <view>共{{ item.count - item.limitationBuyCount }}件</view>
            </view>

            <view class='goods-price' v-else>
              <view class='goods-item-price' v-if="item.count - item.limitationBuyCount > 0">
                <view>限购价￥{{ item.limitationPrice }}元</view>
                <view>共{{ item.count - item.limitationBuyCount }}件</view>
              </view>

              <view class='goods-item-price'>
                <view>原价￥{{ item.showPrice }}元</view>
                <view>共{{ item.limitationBuyCount }}件</view>
              </view>
            </view>
          </view>
        </view>

        <view class='sect-totalMoney'>
          总计 ￥<text>{{ orderDetail.totalPrice }}</text>元
        </view>
      </view>

      <view class="sect-reason">
        <view class="reason-title">退款说明<text>*</text></view>
        <view class="reason-title2">个人原因</view>
        <view class="reason-item" v-for="(item, index) in selfReason" :key="item.id">
          <u-radio-group v-model="cancelReason" placement="column" iconPlacement="right">
            <u-radio :label="item.text" :name="item.text" activeColor="#32B499"></u-radio>
          </u-radio-group>
        </view>
        <view class="reason-title3">门店原因</view>
        <view class="reason-item" v-for="(item, index) in storeReason" :key="item.id">
          <u-radio-group v-model="cancelReason" placement="column" iconPlacement="right">
            <u-radio :label="item.text" :name="item.text" activeColor="#32B499"></u-radio>
          </u-radio-group>
        </view>
      </view>
    </section>

    <footer>
      <view @click="onSubmit()">提交</view>
    </footer>

  </view>
</template>

<script>

export default {
  data() {
    return {
      checkedID: -1,
      orderDetail: {},
      cancelReason: '',
      selfReason: [
        { id: 0, text: '临时有事无法收货' },
        { id: 1, text: '电话/地址填写错误' },
        { id: 2, text: '忘记使用兜兜卡' },
        { id: 3, text: '备注信息忘记填或者填错' },
        { id: 4, text: '买错/买多/漏买/暂不需要商品' }
      ],
      storeReason: [
        { id: 5, text: '店员通知我缺货' },
        { id: 6, text: '店员沟通态度差' },
        { id: 7, text: '其它' }
      ],
    }
  },
  onLoad(options) {
    this.orderDetail = JSON.parse(decodeURIComponent(options.orderDetail));
  },
  methods: {
    onSubmit() {
      const { cancelReason, orderDetail } = this;
      if (cancelReason == '') {
        uni.showToast({ title: '请选择退款原因', icon: 'none' });
        return;
      }
      this.$request.orderApplyRefund({ orderId: orderDetail.orderId, cancelReason }).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.$toast('申请退款成功，请等待后台审核!')
          this.$goPath(1);
        } else {
          this.$toast('申请退款失败，请稍后再试!')
        }
      });
    },

  },
}
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  display: flex;
  flex-direction: column;
  overflow: auto;

  header {
    width: 100%;
    padding: 120rpx 24rpx 80rpx;
    border-radius: 0 0 40rpx 40rpx;
    box-sizing: border-box;
    color: #fff;
    background-color: #32B499;
    background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    font-size: 40rpx;

    image {
      width: 16rpx;
      height: 32rpx;
      display: block;
      margin-right: 6rpx;
    }
  }

  section {
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
    position: relative;
    top: -90rpx;
    display: flex;
    flex-direction: column;

    .sect-goodsList {
      width: 100%;
      background-color: #fff;
      border-radius: 40rpx;
      padding: 24rpx;
      box-sizing: border-box;

      .goods-item {
        display: flex;
        margin-bottom: 24rpx;

        image {
          width: 128rpx;
          height: 128rpx;
          display: block;
          margin-right: 24rpx;
          border-radius: 8rpx;
        }

        .goods-item-content {
          flex: 1;
          min-height: 140rpx;
          padding-left: 24rpx;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .goods-item-name {
            font-size: 32rpx;
            font-family: 'PingFang SC-Bold';
            font-weight: bold;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            /* 设置超过为省略号的行数 */
            overflow: hidden;
          }

          .goods-item-tag {
            font-size: 20rpx;
            width: fit-content;
            padding: 4rpx 10rpx;
            background: #FDF3F3;
            color: #EA5F5F;
            font-family: 'PingFang SC-Medium';
            border-radius: 8rpx;
            box-sizing: border-box;
          }

          .goods-price {
            display: flex;
            align-items: center;
            justify-content: flex-start;
          }


        }
      }

      .goods-item:last-child {
        margin-bottom: 0;
      }
    }

  }
}



.goods-item-price {
  display: flex;
  align-items: flex-end;
  margin-right: 24rpx;
}

.goods-item .goods-item-price>view:first-child>text {
  font-size: 32rpx;
  color: #333333;
  font-family: 'DIN-Bold';
}

.goods-item .goods-item-price>view:last-child {
  margin-left: 10rpx;
  color: #999999;
}

.sect-totalMoney {
  width: 100%;
  text-align: right;
  padding: 24rpx 0;
  box-sizing: border-box;
}

.sect-totalMoney text {
  font-family: 'DIN-bold';
  color: #EA5F5F;
  font-size: 36rpx;
}

.sect-reason {
  margin-top: 40rpx;
  flex: 1;
  background-color: #fff;
  border-radius: 40rpx 40rpx 0 0;
  padding: 24rpx;
  box-sizing: border-box;
}

.reason-title {
  font-size: 32rpx;
  margin-bottom: 24rpx;
}

.reason-title>text {
  color: #EA5F5F;
}

.reason-title2,
.reason-title3 {
  font-size: 24rpx;
}

.reason-title3 {
  margin-top: 48rpx;
}

.reason-item {
  margin-top: 24rpx;
}

.container footer {
  width: 100%;
  height: 8%;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0 -4rpx 8rpx 0 rgba(51, 51, 51, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container footer view {
  width: 90%;
  height: 80rpx;
  border-radius: 46rpx;
  display: flex;
  align-items: center;
  background-color: #32B499;
  justify-content: center;
  color: #fff;
}
</style>